header {
	background-color: #E86224;
	height: 40px;
	margin-bottom: 0;	

	a, a:hover {
		color: white;
		text-decoration: none;
	}

	.container {
		margin-right: auto;
		margin-left: auto;
		width: 90%;
		.row {
			min-width: 720px;
			.span2 {
				float: left;
				margin-left: 20px;
				h1 {
					margin: -2px 0 0;
					.brand {
						display: block;
						width: 200px;
						img {
							height: 28px;
							width: 100px;
						}
						.beta {
							padding-left: 3px;
							margin-top: -3px;
							font-size: 10px;
							font-weight: normal;
							color: white;
						}
					}
				}
			}
			.span14.top-bar {					
				width: 80%;				
				float: right;
				margin-left: 20px;

				.top-panel.pull-right {
					font-size: 14px;
					.avatar {
						width: 20px;
						height: 20px;
						margin-top: -3px;
					}
					a {
						height: 40px;
						line-height: 38px;
						padding: 0 7px;
						font-style: normal;
					}
					#userEmail {
						color: white;
					}
				}
				ul.top-nav {					
					font-size: 16px;
					list-style: none;
					li {
						float: left;
						a {
							height: 40px;
							line-height: 38px;
							padding: 0 10px;
						}
					}
				}
			}
		}
	}
}

ul.section-list {
	list-style: square;
	li {
		margin: 12px;
		div {				
			margin: 5px 0;
		}
		input {
			font-size: 14px;
			height: 22px;
			cursor: text;
			background-color: white;			
		}
	}
}

#line.span1 {
	margin: 0;
	padding: 0;
	width: 1px;
	height: 1000px;
	background-image: url(../img/line.png);
  	background-repeat: repeat-y;
}
.left_col {
	border-right: 1px solid #898989;
	margin: 0;	
	min-width: 400px; max-width: 400px;
	
	.left_panel {
		padding: 5px;
		.logo {
			text-align: center;
			margin-bottom: 10px;
		}
		#tab {
			margin: 3px 9px;
			.form-horizontal .control-label {
				width: 50px;
			}
			.form-horizontal .controls {
				margin-left: 60px;
			}
		}
	}
}
.right_col {
	border-left: 1px solid #898989;
	
	.breadcrumb.center {
		margin-bottom: 10px;
	}
	
	&[class*="span"] {
		margin: 0 0 0 -1px;
		padding: 0px;
	}
}

.form-horizontal .control-group {
  margin-bottom: 10px;
  
}

form.group {
	max-width: 500px;
	margin: 20px auto;

	margin-bottom: 10px;
	padding: 10px;
	background-color: #fff;
	border: 1px solid #ddd;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

fieldset.fieldset.group {
	margin-bottom: 10px;
	padding: 10px;
	background-color: #fff;
	border: 1px solid #ddd;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	.fieldChoice {
		padding: 3px;
		.desc {
			width:60px;
			float:left;
			text-align: right;
		}
		img.choice {
			margin: 0 0 -3px 0;
			cursor: pointer;
		}
	}
}

fieldset {
	position:relative;
	&.editing {
		cursor: pointer;
		border: 1px solid #C2D7EF !important;
		background-color: #DFEFFF !important;
		margin: 0 0 8px 0;
		padding: 10px;
	}

	span.handle {
		position: absolute;
		top: 4px;
		right: 7px;
		font-size: 15px;
		padding: 3px;
	}
	&.sectionBreak {
		.title{
			border-top: 1px dotted #ccc;
			padding-top: 5px;
			font-weight: normal;
			font-size: 120%;
			line-height: 135%;
		}
	}
	&.pageBreak {
		.paging {
			text-align: center;
			border-top: 1px solid #ccc;
			padding-top: 6px;
			.button {
				text-align: center;
				margin: auto;
				width: 120px;
				.hasNext, .hasPrevious {						
					cursor: pointer;
				}
			}
		}
		.line2 {
			margin-top: 12px;
			text-align: center;			
			.indicator {
				border-top: 2px dashed #A3BFDF;
				
				height: 13px;
				strong {
					display: block;
					width: 90px;
					font-size: 120%;
					background: #DFEFFF;
					margin: -12px auto 0 auto;
					text-align: center;
				}
			}
		}
	}
	&.name {
		.first-name, .last-name{
			float: left;
			input {
				width: 80%;
			}
		}
	}
	&.address {
		.full2 {
			width: 70%;
			
			.line {
				margin-bottom: 10px;
				height: 45px;
			}
		}
		.half2, .half3 {
			width: 47%;
			input {
				width: 100%;
			}
		}
		.half2 {
			float: left;
		}
		.half3 {
			float: right;
		}
		input {
			width: 100%;
		}
	}
	
	&.date, &.time, &.phone, &.price{
		.symbol {
			width: 10px;
			float: left;
			text-align: center;
		}
		.col {
			float: left;
			input.xx, input.xx {
				width: 36px;
			}
			input.xxxx {
				width: 60px;
			}
		}
	}
	&.date {
		.pick {
			width: 20px;
			text-align: center;
		}
	}
	&.time{
		select.select {
			height: 24px;
			width: 62px;
		}
	}
	&.price {	
		.symbol.currency {
			font-size: 150%;
			width: 20px;
		}	
		.symbol.radix{
			font-size: 150%;
			line-height: 135%;
			bottom: 0;
			text-align: center;
		}
	}
	&.rate {
		.icon-star-empty {
			content: "\f006";
			font-size: 130%;
			
			display: inline-block;
			width: 14px;
			height: 14px;
			line-height: 14px;
			vertical-align: text-top;
			background-image: url("../img/glyphicons-halflings.png");
			background-position: 14px 14px;
			background-repeat: no-repeat;
		}
	}
	&.file {
		.upload {
			border: 0;
		}
	}
}

#fld_selection_panel {
	list-style: none; 
	
	.fld_group {
		margin: 3px auto;
	}
	.stand, .fancy {
		font-size: 11px;
		padding: 4px 9px 0 12px;
		font-weight: bold;		
	}
	.stand {
		color: #236ABF !important;
	}
	.fancy {
		color: #CF3B19 !important;
	}
	div.drag_fld {
		margin: 3px 3px 3px 12px;
		padding: 0;
		float: left;
		a {
			font-size: 95%;
			border: 1px solid #EEE;
			border-right: 1px solid #CCC;
			border-bottom: 1px solid #CCC;
			-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
			-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
			box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
			-webkit-border-radius: 9px;
			-moz-border-radius: 9px;
			border-radius: 9px;
			-moz-background-clip: padding;
			-webkit-background-clip: padding-box;
			background-clip: padding-box;
			
			&.button {
				width: 150px;
				display: inline-block;
				padding: 5px 6px 6px 6px;
				border: 1px solid #DEDEDE;
				border-right: 1px solid #BBB;
				border-bottom: 1px solid #BFBFBF;
				background-color: white;
				background: -webkit-gradient(linear, left top, left bottom, from(white),
					to(#E9E9E9) );
				background: -webkit-linear-gradient(top, white, #E9E9E9);
				background: -moz-linear-gradient(top, white, #E9E9E9);
				background: -ms-linear-gradient(top, white, #E9E9E9);
				background: -o-linear-gradient(top, white, #E9E9E9);
				font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
				font-size: 100%;
				line-height: 130%;
				color: #464646;
				cursor: pointer;
				text-decoration: none;
				-webkit-border-radius: 11px;
				-moz-border-radius: 11px;
				border-radius: 11px;
				-moz-background-clip: padding;
				-webkit-background-clip: padding-box;
				background-clip: padding-box;
				-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;
				-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;
				box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;
			}
			b {
				line-height: 16px;
				width: 18px;
				height: 16px;
				display: inline-block;
				margin: 0 5px;
				background-image: url(../img/sprite.png);
				background-repeat: no-repeat;
			}
			span {
				margin: 0 3px;
			}
			
		}
		&#singleLine b {
			background-position: -10px -546px;				
		}
		&#multipleChoice b {
			background-position: -10px -616px;
			
		}
		&#paragraphText b {
			background-position: -10px -582px;
		}
		&#number b {
			background-position: -10px -652px;
		}
		&#price b {
			background-position: -10px -900px;
		}
		&#email b {
			background-position: -10px -829px;
		}
		&#name b {
			background-position: -10px -757px;
		}
		&#address b {
			background-position: -10px -792px;
		}
		&#phone b {
			background-position: -10px -864px;
		}
		&#website b {
			background-position: -10px -1044px;
		}
		&#date b {
			background-position: -10px -973px;
		}
		&#time b {
			background-position: -10px -1008px;
		}
		&#checkboxes b {
			background-position: -10px -686px;
		}
		&#dropdown b {
			background-position: -10px -720px;
		}
		&#file b {
			background-position: -10px -938px;
		}
		&#rate b.rate {
			background-image: url(../img/rate.png);
			background-position: 0 0;
		}
		&#image b{
			background-image: url(../img/image.png);
			background-position: 0 0;
		}
		&#sectionBreak {
			.button {
				background: #C1DF5D;
				border: 1px solid #93B825;
			}
			b {
				background-position: -1000px -1000px;
			}
		}
		
		&#pageBreak {
			.button {
				border: 1px solid #EFD1D1;
				background: #FFE5E3;
			}
			b {
				background-position: -1000px -1000px;
			}			
		}
	}
}

#main {
	padding: 20px;
	label.choice {
		display: block;
		font-size: 100%;
		line-height: 150%;
		margin: -22px 0 0 23px;
		padding: 0 0 5px 0;
		color: #222;
		width: 88%;
	}
	#formPanel {
		label, div, label {
			cursor: pointer;
		}

		div.legend {
			font-size: 95%;
			font-weight: bold;
			color: #222;
			line-height: 150%;
			margin: 0;
			padding: 0 0 3px 0;
			border: none;
			display: block;
			white-space: normal;
		}
		
		#app_form_view {
			margin-top: 6px;
			padding-bottom: 100px;
		}
		
		#formPreview {
			padding: 10px;
			div.hd {
				cursor: pointer;
				font-size: 130%;
				height: 20px;
				.left {
					float: left;
				}
				.right {
					float: right;
				}
			}
			#form_canvas_view {
				margin-top: 6px;
				padding-bottom: 100px;
			}
		}
		label.desc, legend.desc {
			font-size: 95%;
			font-weight: bold;
			color: #222;
			line-height: 150%;
			margin: 0;
			padding: 0 0 3px 0;
			border: none;
			display: block;
			white-space: normal;
			width: 100%;
			
			&.thin {
				font-weight: normal;
			}
		}

		input[disabled], select[disabled] {
			color: #666 !important;
			opacity: 1 !important;
			cursor: pointer;
		}
		input.medium, select.medium {
			width: 50%;
		}
		input.text, input.search, textarea.textarea {
			border-top: 1px solid #7c7c7c;
			border-left: 1px solid #c3c3c3;
			border-right: 1px solid #c3c3c3;
			border-bottom: 1px solid #ddd;
		}
		input.text, input.search, input.file, textarea.textarea, select.select {
			font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
			font-size: 100%;
			color: #333;
			margin: 0;
			padding: 2px 0;
		}
	}
}

#submit {
	position:fixed; 
	bottom:0px;
	
	text-align: center;
	padding: 15px 0;

	background-color: rgb(255, 246, 191);
	border-color: rgb(247, 218, 119);
	
	.control-group {
		margin: 0;
		button {
			padding: 0 6px;
		}
	}
}
 
hr.red {
	color: #f00; background-color: #f00; height: 5px;
}

.half {
	width: 48% !important;
	input[type="radio"] {
		margin: 0;
	}
	label {
		display: inline;
	}
}
.left {
	float: left;
}
.right {
	float: right;
}


#formList.row-fluid {	
	.new {
		margin: 10px 0;
	}
	table.act tr {
	}
}
.formContaner, .runContaner, .msgContaner {
	padding: 10px;
	width: 90%;
}

.runContaner {
	input#displayUrl {
		width: 400px;
	}
	.qrcode {
		height: 300px; 
		width: 300px; 
		background-position: -50px -50px; 
	}
}

#chart_canvas_view {
	.title{
		max-width: 600px;
		text-align: center;
	}
	 .chart {
	 	margin: 0 0 30px 0;
	 	height: 200px;
	 	max-width: 600px; 
	 }
}

header .back {
	img {
		float: right;
		margin: 10px 10px 0 0;
		width: 20px;
		height: 20px;
	}
}